<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spring FileUpload Demo</title>
</head>
<body>  
  
     <h3>SpringMVC字节流输入上传文件</h1>   
    <form name="userForm1" action="/app-ss4m/UploadController/upload0.do" enctype="multipart/form-data" method="post">  
        <div id="newUpload1">  
            <input type="file" name="file">  
        </div>  
          
        <input type="button" id="btn_add1" value="增加一行" >  
        <input type="submit" value="上传" >  
    </form>   
    <br>  
    <hr align="left" width="60%" color="#FF0000" size="3">  
     <h3>SpringMVC包装类上传文件（推荐）</h1>   
    <form name="userForm2" action="/app-ss4m/UploadController/upload.do" enctype="multipart/form-data" method="post">  
        <div id="newUpload2">  
            <input type="file" name="file">  
        </div>  
        <input type="button" id="btn_add2" value="增加一行" >  
        <input type="submit" value="上传" >  
          
          
    </form>
    <br>  
    <hr align="left" width="60%" color="#FF0000" size="3">  
     <h3>SpringMVC包装类上传文件+ajaxfileupload（推荐）</h1>   
    <form name="userForm3">  
        <div id="newUpload3">  
            <input id="file_1" type="file" name="file_1" ajaxFileUpload="upload" >  
        </div>  
        <input type="button" id="btn_add3" value="增加一行" >  
        <input type="button" value="上传" onclick="fileUpload();">  
    </form>  
</body>
<script type="text/javascript" src="../../static/js/Utils.js"></script><!-- 依赖 -->
<script type="text/javascript" src="../../static/lib/jquery.min.js"></script><!-- 依赖 -->
<script type="text/javascript" src="../../static/lib/json2.js"></script><!-- 可选 -->
<script type="text/javascript" src="../../static/lib/layer/layer.js"></script><!-- 可选 -->
<script type="text/javascript" src="../../static/js/Invoker.js"></script>
<script type="text/javascript" src="../../static/lib/ajaxfileupload.js"></script> <!--jQuery ajax上传文件插件 -->
<script type="text/javascript">  
    i = 1;  
    j = 1;
    k = 1;  
    $(document).ready(function(){  
        $("#btn_add1").click(function(){  
            i = i + 1;  
            document.getElementById("newUpload1").innerHTML+='<div id="div_'+i
            +'"><input  name="file" type="file"  /><input type="button" value="删除"  onclick="del_1('
            +i+')"/></div>';  
        });  
          
        $("#btn_add2").click(function(){  
            j = j + 1;  
            document.getElementById("newUpload2").innerHTML+='<div id="div_'+j
            +'"><input  name="file_'+j+'" type="file"  /><input type="button" value="删除"  onclick="del_2('
            +j+')"/></div>';  
        });
        $("#btn_add3").click(function(){  
            k = k + 1;  
            document.getElementById("newUpload3").innerHTML+='<div id="div_'+k
            +'"><input  id="file_'+k+'" type="file" name="file_'+k+'" ajaxFileUpload="upload" />'
            +'<input type="button" value="删除" onclick="del_3(' +k+')"/></div>';  
        }); 
    });  
  
    function del_1(o){  
     	 document.getElementById("newUpload1").removeChild(document.getElementById("div_"+o));  
    }  
      
    function del_2(o){  
         document.getElementById("newUpload2").removeChild(document.getElementById("div_"+o));  
    }  
    
    function del_3(o){  
         document.getElementById("newUpload3").removeChild(document.getElementById("div_"+o));  
    }  
    
    function fileUpload(){
    	var fileElementId = [];
    	var files = $("input[ajaxFileUpload='upload']");
    	files.each(function() {  
            var elementId = jQuery($(this)).attr('id');  
            fileElementId.push(elementId);
            //alert(elementId);
        });
		if ((Array.isArray(fileElementId) && fileElementId.length === 0)
	            || (Object.prototype.isPrototypeOf(fileElementId) && Object.keys(fileElementId).length === 0)) {
		    return;
	    }
	    var params = {};
	    params.upload_type = 'test';
	    
	    var params_json = JSON.stringify(params);
	    var reg = new RegExp('"', "g");
	    var params_json = params_json.replace(reg, "?");
	    
	    var data = {
		    params_json : params_json
	    };
	    layer.load();
	    $.ajaxFileUpload({
	        url : Utils.getContextPath() + "/UploadController/ajaxUpload.do",
	        secureuri : false,
	        fileElementId : fileElementId,
	        data : data,
	        dataType : 'json',
	        success : function(data) {
	        	layer.closeAll();
		        if(data && data.res_code=="00000"){
		        	Utils.alert("上传文件成功！");
		        }else{
		        	Utils.alert("上传文件失败 ！" + data.res_message);
		        }
	        },
	        error : function(data) {
		        layer.closeAll();
		        Utils.alert("上传文件失败，请重试 ！" );
	        }
	    });
    }
</script>
</html>

